<script setup lang="ts">
import { nextTick, onMounted, reactive, ref } from "vue";
import { storeToRefs } from "pinia";
import { ElMessage } from "element-plus";
import useAttributeStore from "@/pinia/modules/product/attributeStore/attributeStore/attributeStore.ts";
import useTabNavStore from "@/pinia/modules/product/attributeStore/tabNavStore/tabNavStore.ts";
import { attribute, attributeValue } from "@/api/product/attributeApi/interface.ts";

const attributeStore = useAttributeStore();

const tabNavStore = useTabNavStore();

const { categoryId } = storeToRefs(tabNavStore);

const { currentAttribute, edit } = storeToRefs(attributeStore);

/* el-input组件实例 */
const inputRef = ref(null);

/* 属性的参数(带给服务器的参数) */
const attributePrams: attribute = reactive<attribute>({
  attrName: "",// 新增的属性名
  attrValueList: [], // 属性名下所对应的属性值 (属性值是数组)(对象)
  categoryId: 0, // 三级分类的ID
  categoryLevel: 3, // 代表是三级分类
});

/* 点击添加属性值按钮的回调函数 */
const handleAddAttributeValue = () => {
  // 向attributePrams中的attrValueList数组中添加一个属性值对象
  attributePrams.attrValueList.push({ valueName: "", isEdit: true });
  // 获取输入框组件实例调用focus()自动获取焦点
  nextTick(() => {
    inputRef.value.focus();
  });
};

/* 点击删除属性值按钮的回调函数 */
const handleDeleteAttributeValue = (index: number) => {
  attributePrams.attrValueList.splice(index, 1);
};

/* 点击保存按钮的回调函数 */
const handleSubmit = async () => {
  // 收集当前三级分类的ID
  attributePrams.categoryId = categoryId.value.category3Id as number;
  // 调用函数去发送添加属性或者编辑属性的请求
  try {
    const result: string = await attributeStore.addOrUpdateAttribute(attributePrams);
    await attributeStore.fetchAttributeList(categoryId.value);
    attributeStore.changeScreen(0);
    ElMessage.success(result);
  } catch (error: any) {
    ElMessage.error(error.message);
  }
};

/* 点击取消按钮的回调函数 */
const handleCancel = () => {
  attributeStore.changeScreen(0);
};

/* 属性值输入框失去焦点的回调函数 */
const handleBlur = (atrValue: attributeValue) => {
  // 属性值不能为空
  if (!atrValue.valueName) return ElMessage.warning("属性值不能为空");
  // 查看属性值的模式
  atrValue.isEdit = false;
};

/* 点击tag组件的回调函数 */
const handleTag = (atrValue: attributeValue) => {
  // 编辑属性值的模式
  atrValue.isEdit = true;
  // 获取输入框组件实例调用focus()自动获取焦点
  nextTick(() => {
    inputRef.value.focus();
  });
};

onMounted(() => {
  // 判断是否在编辑状态只有在编辑状态数据才能回显
  if (!edit.value) return;
  // 数据回显(需要进行深拷贝)
  Object.assign(attributePrams, JSON.parse(JSON.stringify(currentAttribute.value)));
});
</script>

<template>
  <div class="attrControl">
    <el-form label-width="70px" inline :model="attributePrams">
      <el-form-item label="属性名称">
        <el-input placeholder="请输入属性名称" v-model.trim="attributePrams.attrName"></el-input>
      </el-form-item>
    </el-form>

    <el-button type="primary" icon="Plus" :disabled="attributePrams.attrName.length===0" @click="handleAddAttributeValue">添加属性值</el-button>

    <el-table border stripe :data="attributePrams.attrValueList">
      <el-table-column width="80px" label="序号" type="index" align="center"></el-table-column>
      <el-table-column label="属性值名称">
        <template #default="{row}">
          <el-input placeholder="请输入属性值" ref="inputRef" v-model.trim="row.valueName" v-if="row.isEdit" @blur="handleBlur(row)"></el-input>
          <el-tag effect="dark" type="info" v-else @click="handleTag(row)">{{ row.valueName }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="属性值操作" align="center">
        <template #default="{$index}">
          <el-button type="danger" icon="Delete" @click="handleDeleteAttributeValue($index)">删除属性值</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button type="success" @click="handleSubmit" :disabled="attributePrams.attrValueList.length===0">保存</el-button>
    <el-button type="danger" @click="handleCancel">取消</el-button>
  </div>
</template>

<style scoped lang="scss">
.attrControl {
  .el-table {
    margin: 10px 0;

    span {
      cursor: pointer;
    }
  }
}
</style>
